{extend name="public/layout" /}
{block name="head_css"}
    <style>
        body {
            background-color: #fff;
        }

        .sam-header {
            background-color: #ff7200;
            text-align: center;
        }

        .sam-header .words {
            width: 100%;
            font-size: 1rem;
            color: #fff;
        }

        .sam-login-box {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }

        .sam-login-box .logo {
            width: 50%;
            padding-top: 17.111111%;
            margin-left: 25%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url('/static/index/image/logo_image_login_transparent.png');
        }

        .sam-login-box .login-line {
            width: 80%;
            margin: 0 auto 5% auto;
            border-bottom: #ececec solid 1px;
            font-size: .9rem;
        }

        .sam-login-box .login-line:first-child {
            margin-top: 10%;
        }

        .sam-login-box .login-line.tips {
            margin-top: 10%;
            margin-bottom: 10%;
            border-bottom: none;
            text-align: center;
        }

        .sam-login-box .login-line>input {
            width: 100%;
            border: none;
            box-shadow: none;
            font-size: 1rem;
            padding: 3px 0;
        }

        .sam-login-box .login-line>input.code,.sam-login-box .login-line>.code-btn,.sam-login-box .login-line>.tick-icon,.sam-login-box .login-line>.words {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-login-box .login-line>input.code {
            width: 65%;
        }

        .sam-login-box .login-line>.code-btn {
            width: 35%;
            box-sizing: border-box;
            padding: 2px 0;
            font-size: .8rem;
            color: #ff7200;
            border: #ff7200 solid 1px;
            border-radius: 1rem;
            text-align: center;
            margin: 3px 0;
        }

        .sam-login-box .login-line>.code-btn.disabled {
            color: #ffb375;
            border-color: #ffb375;
        }

        .sam-login-box .login-line>.tick-icon {
            width: 4.5%;
            padding-top: 4.5%;
            margin-right: 1%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url('/static/index/image/icon_login_tick_ff7200.png');
        }
        .sam-login-box .login-line>.un-tick-icon {
            background-image: url('/static/index/image/un_check.png')!important;
        }
        .sam-login-box .login-line>.words {
            font-size: .8rem;
            color: #333;
        }

        .sam-login-box .login-line>.words a,.sam-login-box .login-line>.words a:active {
            color: #ff7200;
            text-decoration: none;
        }

        .submit-btn {
            width: 80%;
            box-sizing: border-box;
            padding: 5px 0;
            background-color: #ff7200;
            font-size: 1.1rem;
            color: #fff;
            text-align: center;
            margin: 0 0 0 10%;
            border-radius: 3px;
            border: none;
        }
    </style>
{/block}


{block name="main"}
<!-- 头部 -->
<div class="container sam-header">
    <div class="words">用户登录</div>
</div>
<!-- 头部 END -->

<div class="container sam-login-box">
    <div class="logo"></div>
    <form id="form">
        <div class="login-line">
            <input id="phone"  name="mobile" placeholder="请输入您的手机号码" value="" />
        </div>
        <div class="login-line no-font-size">
            <input  class="code" name="code" placeholder="请输入验证码" value="" />
            <div class="code-btn">获取验证码</div>
        </div>
        <div class="login-line tips no-font-size">
            <div id="check" onclick="check(this)" class="tick-icon"></div>
            <div class="words">
                我已阅读并同意<a href="{:url('article/index',array('id'=>1))}">用户协议</a>和<a href="{:url('article/index',array('id'=>2))}">隐私政策</a>
            </div>
        </div>
        <button id="submit" type="button" class="submit-btn">立即登录</button>
    </form>
</div>
{/block}
{block name="footer"}
{/block}
{block name="script"}
<script>
    $('#submit').on('click',function(){
        if($('#check').hasClass('un-tick-icon')){
            alert('请同意用户协议与隐私政策');
            return false;
        }
        var obj = $("#form").serializeArray();
        var url = "{:url('index/login/login')}";
        $.post(url,obj,function(data){
            if(data.code != 1){
                alert(data.msg);
            }else{
                window.location.href = '{:url("index/index/index")}';
            }
        });
    });
    function check(obj){
        if($(obj).hasClass('un-tick-icon')){
            $(obj).removeClass('un-tick-icon');
        }else{
            $(obj).addClass('un-tick-icon');
        }
    }
    var timer = null;
    $('.code-btn').click(function () {
        if($(this).hasClass('disabled')) {
            return false;
        }
        else {
            var _this = this;
            var d = new Object();
            d.mobile = $('#phone').val();
            $.post("{:url('util/sms')}",d,function(data){
                if(data.code == 1){
                    alert('短信发送成功');
                    var count = 60;
                    $(_this).text(count).addClass('disabled');
                    timer = setInterval(function() {
                        if(count <= 1) {
                            count = 60;
                            $(_this).text('获取验证码').removeClass('disabled');
                            clearInterval(timer);
                            timer = null;
                        }else{
                            count --;
                            $(_this).text(count);
                        }
                    }.bind(_this),1000);
                }else{
                    alert(data.msg);
                }
            });
        }
    });
</script>
{/block}